<template>
  <div class="page-header" :class="{'border':showBorder}">
    <div class="btn-back" @click="back">
      <i class="fdx-icons-back icon-back"></i>
    </div>
    <div class="title">{{title}}</div>
  </div>
</template>

<script>
export default {
  props: {
    title: {
      type: String,
      default: ''
    },
    showBorder: {
      type: Boolean,
      default: false
    }
  },
  methods: {
    back() {
      this.$router.return()
    }
  }
}
</script>

<style lang="scss" scoped>
@import "../../assets/sass/_vars";

.page-header {
  background-color: white;
  height: 45px;
  display: flex;
  width: 100%;

  &.border {
    border-bottom: solid 1px #F3F3F3;
  }

  .btn-back {
    width: 45px;
    height: 45px;
    display: flex;
    align-items: center;
    justify-content: center;

    .icon-back {
      &::before {
        color: $text-gray;
      }
    }
  }

  .title {
    color: $text-dark;
    font-size: 18px;
    padding-right: 40px;
    flex-grow: 1;
    display: flex;
    align-items: center;
    justify-content: center;
  }
}
</style>
